/**
 * Created by lwy on 2017/9/4.
 */

var num1;
var page=0;
var shopId = GetQueryString('shopId');
var goodsId = GetQueryString('goodsId');
var commentsTypeValue =1;
var id;

//评价图片高度自适应
$(function(){
    var imgWidth = $('.comment-img-box img').width();
    $('.comment-img-box img').css('height',imgWidth);
    //评价标题
    $.ajax({
        url:'/commentsC/commentsSumdatas.json',
        dataType:'json',
        data:{
            shopId:shopId,
            goodsId:goodsId,
        },
        type:'post',
        success:function (data) {
            var initTitle = data.commentsSumdatas;
            $('.comment-number').html(data.userCustomersSum+'人评价');
            $('#shopScore').html(data.shopGraded);
            showStar3(data.shopGraded);
            for(var k=0;k< initTitle.length;k++){
                var borderStyle = '';
                if(initTitle[k].commentsType=="差评"){
                    borderStyle = 'border:1px solid #c5c5c5;color:#c5c5c5'
                }else{
                    borderStyle = '';
                }
                $('<div value="'+ initTitle[k].commentsTypeValue+'" style="'+borderStyle+'">'+ initTitle[k].commentsType+'('+initTitle[k].commentsSum+')</div>').appendTo($('.keyword-box'))
            }
            $('.keyword-box div:first-child').addClass('comment-active');
        }
    })
})

doAjax();

function doAjax() {
    page++;
    $.ajax({
        url:'/commentsC/getCommentsList.json',
        dataType:'json',
        data:{
            shopId:shopId,
            commentsTypeValue:commentsTypeValue,
            goodsId:goodsId,
        },
        type:'post',
        success:function (data) {
            $('.comment-box').empty();
            var initData = data.datas;
            for(var i=0;i<initData.length;i++){
                var dataAutor = initData[i].customerAvotorr;
                var shopReply = initData[i].replyMessage;
                var replyMessage;
                var autor;
                if(dataAutor==""){
                    autor = '../img/comment_h.jpg';
                }else{
                    autor = dataAutor;
                }
                //商家回复
                if(shopReply==""){
                    replyMessage = '';
                }else{
                    replyMessage = '<div class="reply-sanjiao"></div>\n' +
                        '<div class="reply-box"><span>商家回复：</span>'+shopReply+'</div>'
                }
                $('<div class="comment">\n' +
                    '<div class="comment-user">\n' +
                    '<div class="user-img"><img src="'+autor+'" alt="头像"></div>\n' +
                    '<div class="user-info">\n' +
                    '<span class="user-name">'+initData[i].customerRealName+'</span>\n' +
                    '<span class="user-time">'+initData[i].createTime+'</span>\n' +
                    '</div>\n' +
                    '<span class="comment-star comment-star2" score="'+initData[i].gradedValue+'">' +
                    '<a class="add-star2"></a>' +
                    '<a class="del-star2"></a>' +
                    '</span>' +
                    // '<div class="user-star"><img src="../img/four-star.jpg" alt="评分"></div>\n' +
                    '</div>\n' +
                    '<div class="comment-detail">'+initData[i].content+'</div>\n' +
                    '<div class="comment-img-box mui-clearfix" id="comment'+initData[i].id+'">\n' +
                    '</div>' + replyMessage +
                    '</div>').appendTo($('.comment-box'))

                var commentImg = initData[i].imgUrl.split(',');
                var imgWidth = $('body').width()*0.98*0.24-11
                $('.comment-img-box img').css('height',imgWidth);
                for(var b=0;b<commentImg.length;b++){
                    $('<div><img data-preview-src="" data-preview-group="'+initData[i].id+'" src="'+commentImg[b]+'" alt=""></div>').appendTo($('#comment'+initData[i].id+''))
                }
                if(commentImg.length>3){
                    $('.comment-box .comment .comment-img-box div:nth-child(3)').css('position','relative');
                    $('<span class="comment-img-number">'+commentImg.length+'</span>').appendTo($('#comment'+initData[i].id+' div:nth-child(3)'));
                }
            }
            $('.comment-star2').each(function () {
                var width = $(this).width();
                var width2 = $(this).find('.del-star2');
                //
                var move_n = $(this).attr('score');
                var del_move=(move_n*width)/5;
                width2.css({'background-position':-del_move+'px 0px','left':del_move+'px'})
            })

            num1 = data.datas.length;
        }
    })
    return num1;
}

function doTitle(b) {

}

//评价选项
$('body').on('click','.keyword-box div',function () {
    $(this).addClass('comment-active');
    $(this).css({'color':'#fff'});
    $(this).siblings().removeClass('comment-active');
    $(this).siblings().css({'border':'1px solid #febe80','color':'#fe9b40'})
    if($(this).attr('value')=='4'){
        $(this).css({'border':'1px solid #febe80','color':'#fff'});
    }
    commentsTypeValue = $(this).attr('value');
    page=0;
    doAjax();
})

//用户总评分
function showStar3(n){
    var con_wid3=document.getElementById("comment-star").offsetWidth;
    var del_star3=document.getElementById("del_star3");

    //透明星星移动的像素
    var del_move3=(n*con_wid3)/5;

    del_star3.style.backgroundPosition=-del_move3+"px 0px";
    del_star3.style.left=del_move3+"px";
}

//上拉加载下拉刷新
mui.init({
    pullRefresh : {
        container:"#refreshContainer",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
        down: {
            contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
            contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
            contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
            callback: function () {
                window.location.reload();
                mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
            }
        },
        up : {
            contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
            contentnomore:'我是有底线的',//可选，请求完毕若没有更多数据时显示的提醒内容；
            callback :function(){
                setTimeout(function () {
                    var numResult = doAjax();
                    if (numResult < 20) {
                        mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
                    } else {
                        mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
                    }
                }, 1000);
            } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
        }
    }
});
